<template>
  <div class="container">
    <h1 class="title">进度列表</h1>
    <div class="list_box">
      <div class="item" v-for="(item, index) in progressList" :key="index">
        <div class="item_hd">
          <span class="date">{{format(item.createTime)}}</span>
          <span @click="editBtnClickEvent(item)" class="edit_btn">编辑</span>
        </div>
        <div class="detail_box">
          <div class="detail">
            <div>{{item.content}}</div>
            <div class="detail_img_list" v-if="item.imgList.length > 0">
              <img v-for="(url, index) in item.imgList" :key="index" :src="url" v-gallery alt="" />
            </div>
          </div>
          <!-- 支付状态 payState， 为paid是已经支付， unpaid是未支付，noorder是不存在订单 -->
          <div class="status" v-if="item.payState == 'paid'">已支付</div>
          <div class="status" v-else-if="item.payState == 'unpaid'">
            待支付：
            <span>￥ {{item.money}}</span> 元
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="编辑进度"
      :visible.sync="showEdit"
      :before-close="handleClose"
      center
      width="560px"
    >
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="案件编号">
            <span>{{id}}</span>
          </el-form-item>
          <el-form-item label="支付费用">
            <el-input placeholder="选填" v-model="form.money">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="发生时间" class="tip">
            <el-date-picker v-model="form.createTime" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="进度描述" class="tip">
            <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="form.content"></el-input>
          </el-form-item>
          <el-form-item label="添加图片">
            <div class="u-upload">
              <div v-for="(item, index) in imgList" :key="index" class="u-upload-img-item">
                <img :src="item" alt>
                <div class="u-upload-mark">
                  <i @click="deleteImg(item)" class="el-icon-error u-upload-deleted"></i>
                </div>
              </div>
              <input
                type="file"
                @change="upfile"
                ref="addFile"
                name="file"
                id="file"
                accept="image/png, image/jpeg, image/gif, image/jpg"
                class="u-upload-file"
              >
              <label for="file" class="btn btn-success">
                <i class="el-icon-plus"></i>
              </label>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="handleClose">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import config from '../../config';
export default {
  name: "ProgressList",
  data() {
    return {
      id: null,
      showEdit: false,
      progressList: null,
      form: {
        money: null,
        createTime: null,
        content: null,
        id: null // 进程id
      },
      imgList: []
    };
  },

  mounted() {
    console.log("this is current quill instance object", this.editor);
  },
  created: function() {
    if (this.$route.params.id) {
      this.id = this.$route.params.id;
      this.getCaseProgressList();
    }
  },
  methods: {
    editBtnClickEvent: function(progress) {
      console.log("progress::", progress);
      this.showEdit = true;
      this.form.money = progress.money;
      this.form.createTime = progress.createTime;
      this.form.content = progress.content;
      this.form.id = progress.id;
      this.form.caseId = progress.caseId;
      this.imgList = this._utils.isEmpty(progress.picUrl) ? [] : progress.picUrl.split('|');
    },
    // 删除图片
    deleteImg(imgUrl) {
      this.imgList = this.imgList.filter(item => item != imgUrl);
    },
    // 上传图片
    upfile(e) {
      const files = e.target.files;
      console.log("files:::", files);
      console.log("files[0]:::", files[0]);
      const form = new FormData();
      form.append("file", files[0]);
      form.append("dir", "progress");
      form.append("type", "1");

      this.$store.dispatch("UPLOAD_FILE", form).then(res => {
        console.log("res::::up:::", res);
        if (res.data.retCode == 0) {
          this.$message.success("上传成功！");
          console.log("this.imgList::", this.imgList);
          this.imgList.push(res.data.data);
          //   this.iconUrl = res.data.data;
          e.target.value = '';
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
          e.target.value = '';
        }
      });
    },
    onSubmit: function() {
      this.updateProgress();
    },
    updateProgress: function() {
      // ADD_CASE_PROGRESS
      this.$store
        .dispatch("UPDATE_CASE_PROGRESS", {
          id: this.form.id,
          money: this.form.money,
          createTime: this._utils.format(this.form.createTime, "yyyy-mm-dd"),
          content: this.form.content,
          caseId: this.form.caseId,
          picUrl: this.imgList.join("|")
        })
        .then(res => {
          if (res.data.retCode == 0) {
            this.$message.success("编辑成功！");
            this.getCaseProgressList();
            this.handleClose();
          } else {
            res.data.errorMsg && this.$message.warning(res.data.errorMsg);
          }
        });
    },
    handleClose: function() {
      this.showEdit = false;
    },
    format: function(date) {
      return this._utils.format(date, "yyyy-mm-dd");
    },

    // 根据案件id获取案件进程列表
    getCaseProgressList() {
      this.$store
        .dispatch("GET_CASE_PROGRESS_LIST", {
          caseId: this.id
        })
        .then(res => {
          if (res.data.retCode == 0) {
            let list = res.data.data;
            for(let i = 0; i< list.length; i++) {
              if(list[i].picUrl) {
                let imgList = list[i].picUrl.split('|');
                list[i].imgList = imgList;
                console.log('imgList:::', imgList);
              } else {
                list[i].imgList = [];
              }
            }
            this.progressList = list;
          } else {
            res.data.errorMsg && this.$message.warning(res.data.errorMsg);
          }
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .upload-tip {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
  line-height: 24px;
} */
.detail_img_list{
  padding: 20px 0;
}
.detail_img_list>img{
  width: 250px;
  height: 250px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.title {
  font-size: 24px;
  color: #333;
  padding: 40px 0 20px 0;
}
.item {
  border-left: 1px solid #666;
  padding-left: 20px;
  padding-bottom: 30px;
  position: relative;
}
.item::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid #666;
  border-radius: 50%;
  position: absolute;
  top: 0px;
  left: -5px;
  background-color: #fff;
}
.item_hd {
}
.date {
  display: inline-block;
  font-size: 16px;
  color: #666;
}
.edit_btn {
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #409eff;
  color: #409eff;
  padding: 6px 10px;
  border-radius: 4px;
  margin-left: 20px;
}

.detail_box {
  padding-top: 20px;
  overflow: hidden;
}
.detail {
  float: left;
  width: 600px;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}
.status {
  padding-left: 40px;
  overflow: hidden;
  font-size: 14px;
  color: #999;
}
.status > span {
  color: #409eff;
  font-size: 20px;
  font-weight: bold;
}
</style>
